import React from "react";
import { Input, Button, List } from "antd";

const todolist2ui = (props)=>{
    return (
        <div>
          <div style={{ margin: "0 auto", width: "400px" }}>
            <Input
              value={props.inputValue}
              placeholder="todoinfo"
              style={{ width: "300px", marginRight: "10px" }}
              onChange={props.handleChange}
            />
            <Button
              type="primary"
              style={{ width: "90px" }}
              onClick={props.handleButton}
            >
              提交
            </Button>
          </div>
          <List
            bordered
            dataSource={props.list}
            renderItem={(item, index) => (
              //   (index)=>{this.props.handleDelete(index)}
              <List.Item onClick={props.handleDelete.bind(this, index)}>
                {item}
              </List.Item>
            )}
            style={{ width: "400px", margin: "0 auto" }}
          />
        </div>
      );
}
// class todolist2ui extends Component {
//   render() {
//     return (
//       <div>
//         <div style={{ margin: "0 auto", width: "400px" }}>
//           <Input
//             value={this.props.inputValue}
//             placeholder="todoinfo"
//             style={{ width: "300px", marginRight: "10px" }}
//             onChange={this.props.handleChange}
//           />
//           <Button
//             type="primary"
//             style={{ width: "90px" }}
//             onClick={this.props.handleButton}
//           >
//             提交
//           </Button>
//         </div>
//         <List
//           bordered
//           dataSource={this.props.list}
//           renderItem={(item, index) => (
//             //   (index)=>{this.props.handleDelete(index)}
//             <List.Item onClick={this.props.handleDelete.bind(this, index)}>
//               {item}
//             </List.Item>
//           )}
//           style={{ width: "400px", margin: "0 auto" }}
//         />
//       </div>
//     );
//   }
// }
export default todolist2ui;
